import { NavBar, Card, Button, Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import styles from './index.module.css'
import { fetchReceptionDetail, verifyContract } from '../../services/api'

export default function ContractInfo() {
  const navigate = useNavigate()
  const { id } = useParams()
  const [detail, setDetail] = useState<any>(null)

  useEffect(() => {
    if (!id) return
    fetchReceptionDetail(id)
      .then(setDetail)
      .catch(() => null)
  }, [id])

  return (
    <div className={styles['contract-page']}>
      <NavBar back onBack={() => navigate(-1)}>
        合同信息
      </NavBar>

      <div className={styles['contract-section']}>
        <Card style={{ borderRadius: 12 }}>
          <div className={styles['contract-kv-main']}>
            <span>合同编号：</span>
            <em>{detail?.contractNo || detail?.contractId || '-'}</em>
          </div>
          <div className={styles['contract-kv-main']}>
            <span>合同编号：</span>
            <em>{detail?.projectName || detail?.buildingEstateName || '-'}</em>
          </div>

          <div className={styles['contract-divider']}>房屋基本情况</div>
          <div className={styles['contract-kv']}>
            <span>项目地址-区县：</span>
            <em>{detail?.buildingEstateName || '-'}</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>项目地址-路：</span>
            <em>{detail?.buildingBlockName || '-'}</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>项目地址-号：</span>
            <em>{detail?.houseNo || '-'}</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>建筑结构：</span>
            <em>{detail?.houseTypeName || '-'}</em>
          </div>

          <div className={styles['contract-divider']}>交付(租赁)期限</div>
          <div className={styles['contract-kv']}>
            <span>交付期限：</span>
            <em>{detail?.receiveTime || '-'}</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>租赁期限(月数)：</span>
            <em>-</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>租赁期-起：</span>
            <em>{detail?.leaseTermStart || '-'}</em>
          </div>
          <div className={styles['contract-kv']}>
            <span>租赁期-止：</span>
            <em>{detail?.leaseTermEnd || '-'}</em>
          </div>
        </Card>
      </div>

      <div className={styles['contract-bottom']}>
        <Button
          size="large"
          style={{ fontSize: '14px' }}
          className={styles['contract-btn'] + ' ' + styles['ghost']}
          onClick={async () => {
            if (!detail?.id) {
              navigate(-1)
              return
            }
            try {
              await verifyContract({id: detail?.id ?? '', houseId: detail?.houseId ?? '', contractVerification: 2 })
              Toast.show({ icon: 'success', content: '已标记不符合' })
              navigate(-1)
            } catch (e) {}
          }}
        >
          不符合
        </Button>
        <Button
          size="large"
          style={{ fontSize: '14px' }}
          className={styles['contract-btn'] + ' ' + styles['primary']}
          disabled={detail?.contractVerification === 1}
          onClick={async () => {
            try {
              await verifyContract({id: detail?.id ?? '', houseId: detail?.houseId ?? '', contractVerification: 1 })
              Toast.show({ icon: 'success', content: '已确认合同信息' })
              navigate(-1)
            } catch (e) {}
          }}
        >
          {detail?.contractVerification === 1 ? '已经确认' : '确认合同信息'}
        </Button>
      </div>
    </div>
  )
}
